<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>


</head>

<body>
    <div id="root" class="tt">
        <div title="tt1">hello1</div>
        <div title="tt2">hello2</div>
        <div title="tt3">hello3</div>
        <img src="http://img.netbian.com/file/2020/0904/c150c8a4fdf8762f51093f636c7de785.jpg" alt="xxx">

        <p>
            <span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span>
        </p>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <script>
        // https://www.jianshu.com/p/5a1e3b78436f
        // 用构造函数来 进行以上转换
        class VNode {
            constructor(tag, attrs, value, type) {
                this.tag = tag && tag.toLowerCase(); // 标签名
                this.attrs = attrs; // 属性值
                this.value = value; // 文本
                this.type = type; // 元素类型
                this.children = [] // 子节点
            }

            // 追加子节点
            appendChild(vnode) {
                this.children.push(vnode)
            }

        }

        function getVirtualDom(node) {
            let nodeType = node.nodeType;
            let _vnode = null;

            if (nodeType === 1) {
                let nodeName = node.nodeName;
                let property = node.attributes;
                let _propertyObj = {};

                for (let i = 0; i < property.length; i++) {
                    _propertyObj[property[i].nodeName] = property[i].nodeValue;
                }


                _vnode = new VNode(nodeName, _propertyObj, undefined, nodeType)

                let childNodes = node.childNodes;
                for (let i = 0; i < childNodes.length; i++) {
                    _vnode.appendChild(getVirtualDom(childNodes[i]))
                }
            } else if (nodeType === 3) {
                // 尤其要注意，文本也是一个节点
                // 可以回忆一下，原生js生成一个节点的步骤，就理解了
                let text = node.nodeValue
                _vnode = new VNode(undefined, undefined, text, nodeType)

            }
            return _vnode;
        }

        let root = document.querySelector("#root");

        let vRoot = getVirtualDom(root)
        
        console.log(root);
        console.log(vRoot)


        function createVNode(type, attrs, children, value){
            return new VNode(type, attrs, children, value)
        }

        // VNode{
        //     attrs: {},
        //     children: [],
        //     type: 1,
        //     value: null,
        // }
         
        // 渲染一个vdom对象到el中
        function render(el, domObj){
           
        }

        // 渲染辅助函数
        function renderVNode(){
            let el = document.createElement(domObj.type);

            // 遍历props对象，然后给创建的元素el设置属性
            for(let key in domObj.attrs){
                // 设置属性的方法
                setAttr(el, key, domObj.attrs[key]);
            }

            // 遍历子结点数组
        }

         // 将元素插入页面中
        function renderDom(el, target){
            target.appendChild(el);
        }
        function setAttr(node, key, value){
            // 需要判断事什么key
            switch(key){
                case 'value':
                    // 属性是value就要看标签类型
                    // input和textarea的value需要做区别
                    if(node.tagName.toLowerCase() === 'input' || node.tagName.toLowerCase() === 'textarea'){
                            node.value = value;
                        }else{
                            node.setAttribute(key, value);
                        }
                        break;
                case 'style':
                    node.style.cssText = value;
                    break;
                
                default:
                    node.setAttribute(key,value);
                    break;
                }
        }


      
    </script>
</body>

</html>